<template>
	<view class="main">
		<pageLoading mode="if" :show="isShow">
			<!-- 基本信息 -->
			<view>
				<view class="title card">基本信息</view>
				<view>
					<view class="card flex flex-ai-fs flex-jc-sb" style="height: 100%;padding: 40rpx;">
						<view class="card-title">头像</view>
						<view class="flex flex-dir-c flex-ai-fe">
							<!-- <view @click="chooseImg">
								<view style="color: #333333;font-size: 28rpx;" v-if="!tempFilePaths">请上传头像</view>
								<view style="margin-bottom: 10rpx;" v-else>
									<u-image width="100rpx" height="100rpx"
										:src="domain_url"></u-image>
								</view>
							</view> -->
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseImg">
								<view style="color: #333333;font-size: 28rpx;" v-if="!tempFilePaths">请上传头像</view>
								<view style="margin-bottom: 10rpx;" v-else>
									<u-image width="100rpx" height="100rpx" :src="domain_url"></u-image>
								</view>
							</button>
						</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>昵称</view>
						<view>
							<u-input inputAlign="right" v-model="userinfo.nickname" border="none" placeholder="请完善昵称"
								type="nickname"></u-input>
						</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card" @click="sexShow = true">
						<view>性别</view>
						<view>{{userinfo.sex | filterSex}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>电话</view>
						<view>
							<u-input v-model="userinfo.mobile" inputAlign="right" border="none"
								placeholder="请输入电话"></u-input>
						</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>城市</view>
						<view class="flex flex-jc-fe" style="width: 80%;">
							<u-input v-model.trim="userinfo.address_detail_text" inputAlign="right" border="none"
								placeholder="省市区县、街道等"></u-input>
							<view class="flex flex-ai-c" style="margin-left: 10rpx;" @click="skip()">
								<i-icon style="margin-right: 10rpx;margin-top: 10rpx;" icon="dingwei" size="28rpx" />
								<view>定位</view>
							</view>
						</view>
					</view>

				</view>
			</view>

			<view class="flex flex-ai-c flex-jc-c card" style="margin-top: 20rpx;" @click="logout">
				<view>退出当前账号</view>
			</view>
			<view style="padding: 60rpx 0 60rpx 0">
				<ButtonConfirm myTxt="保存" @click="updateUserInfo"></ButtonConfirm>
			</view>
			<u-select @confirm="confirm" v-model="sexShow" :list="sexColumns"></u-select>
		</pageLoading>

	</view>
</template>

<script>
	import pageLoading from '@/components/pageLoading.vue';
	import ButtonConfirm from '@/components/buttonConfirm.vue'
	import user from '@/api2/user.js';
	import common from '@/api2/common.js';
	export default {
		components: {
			pageLoading,
			ButtonConfirm
		},
		data() {
			return {
				show: false,
				sexShow: false,
				userinfo: {},
				isShow: false,
				sexColumns: [{
					label: '男',
					value: 1
				}, {
					label: '女',
					value: 2
				}],
				tempFilePaths: '',
				newInfo: {},
				domain_url: ''
			}
		},
		filters: {
			filterSex(v) {
				let text = ''
				switch (Number(v)) {
					case 1:
						text = '男'
						break
					case 2:
						text = '女'
						break
					default: {
						text = '请选择性别'
					}
				}
				return text
			},
		},
		onLoad(op) {
			this.getUserInfo()
		},
		methods: {
			isObjectValueEqualNew(obj1, obj2) {
				let that = this
				// 判断两个变量是否为对象类型
				let isObj = (toString.call(obj1) === '[object Object]' && toString.call(obj2) === '[object Object]');
				if (!isObj) {
					return false;
				}
				// 判断两个对象的长度是否相等，不相等则直接返回 fase
				let obj1Keys = Object.keys(obj1);
				let obj2Keys = Object.keys(obj2);
				if (Object.keys(obj1).length !== Object.keys(obj2).length) {
					return false;
				}
				// 判断两个对象的每个属性值是否相等
				for (const key in obj1) {
					// 判断两个对象的键是否相等
					if (obj2.hasOwnProperty.call(obj2, key)) {
						let obj1Type = toString.call(obj1[key]);
						let obj2Type = toString.call(obj2[key]);
						// 如果值是对象，则递归
						if (obj1Type === '[object Object]' || obj2Type === '[object Object]') {
							if (!that.isObjectValueEqualNew(obj1[key], obj2[key])) {
								return false;
							}
						} else if (obj1[key] !== obj2[key]) {
							return false; // 如果不是对象，则判断值是否相等
						}
					} else {
						return false;
					}
				}
				return true; // 上面条件都通过，则返回 true
			},
			confirm(e) {
				this.userinfo.sex = e[0].value
			},
			async upload(file) {
				uni.showLoading()
				const res = await common.upload(file)
				uni.hideLoading()
				this.domain_url = res.data.domain_url
				this.tempFilePaths = res.data.url
			},
			chooseImg(e) {
				const {
					avatarUrl
				} = e.detail
				this.upload(avatarUrl)
			},
			logout() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			async getUserInfo() {
				const res = await user.getUserInfo()
				// that.userinfo.address_detail_text
				if (!res.data.address_detail_text) res.data.address_detail_text = ''
				this.userinfo = res.data
				this.newInfo = JSON.parse(JSON.stringify(res.data))
				this.tempFilePaths = res.data.avatar
				this.domain_url = res.data.avatar
				this.isShow = true
			},
			async updateUserInfo() {
				this.userinfo.avatar = this.tempFilePaths
				if (this.isObjectValueEqualNew(this.userinfo, this.newInfo)) {
					uni.showToast({
						title: "暂无更新数据",
						icon: 'none'
					})
					return
				}
				const res = await user.editMemberInfo({
					address_detail_text: this.userinfo.address_detail_text,
					nickname: this.userinfo.nickname,
					sex: this.userinfo.sex,
					mobile: this.userinfo.mobile,
					lat: this.userinfo.lat,
					lng: this.userinfo.lng,
					avatar: this.tempFilePaths,

				})
				if (res.code === 200) {
					this.getUserInfo()
					uni.showToast({
						title: "保存成功",
						icon: 'none',
					})
				} else {
					uni.showToast({
						title: "参数错误",
						icon: 'none',
					})
				}
			},

			chooseLocation(data) {
				let that = this
				uni.chooseLocation({
					...data,
					success: function(res) {
						uni.hideLoading()
						that.userinfo.lat = res.latitude
						that.userinfo.lng = res.longitude
						setTimeout(() => {
							that.userinfo.address_detail_text = res.address + '/' + res.name
						}, 500)
					},
					fail: err => {
						uni.hideLoading()
					}
				});
			},
			getLocation() {
				uni.showLoading()
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						that.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
						})
					},
					fail: function(err) {
						that.chooseLocation({
							latitude: 37.870472,
							longitude: 112.548877,
						})
					}
				})
			},
			skip(url = '') {
				if (url) {
					uni.navigateTo({
						url: url
					})
					return
				}
				let that = this
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						that.getLocation()
					},
					fail: () => {
						that.getLocation()
						/* wx.showModal({
							content: '检测到您没打开位置权限，是否去设置打开？',
							success: function(res) {
								if (res.confirm) {
									wx.openSetting()
								}
							},
						}); */
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-input {
		border: none !important;
	}

	/deep/.uni-input-placeholder {
		color: #333333 !important;
	}

	button {
		font-size: 28rpx;
		font-weight: 300;
		color: #999999;
		padding: 0;
		margin-right: 8rpx;
		background: none;
	}

	// 边框样式
	button::after {
		border: 0;
	}

	.main {
		.title {
			padding: 0 30rpx !important;
			background: #F2F2F2 !important;
			border: 0 !important;
			line-height: 90rpx;
			color: #333333 !important;
		}

		text {
			color: #FC602B;
			margin-right: 5rpx;
		}

		.card {
			padding: 0 40rpx;
			height: 90rpx;
			border-bottom: 1rpx solid #D8D8D8;
			background: #fff;
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>